define([
    'MVC',
    'jquery',
    'css!./corousel.css'
], function(MVC, $) {
    MVC.addView('home.carousel', function(M) {
        let $dom = $('<div class="carousel-container"></div>');
        let data = M.get('home.carousel').carousel;
        console.log(data);
        let list = data.list.map(item => {
            return `
                    <li>
                        <img src="${item.src}" alt="">
                        <p class="text">${item.intro}</p>
                    </li>
            `
        }).join('');
        let Dot = data.list.map((item, index) => {
            return `
                <span class="btn ${index=== 0 ? 'choose' : ''}"></span>
            `
        }).join('')
        let html = `
                <ul class="Carousel">${list} </ul>
                <div class="btns">
                    <div class="prev"></div>
                    ${Dot}
                    <div class="next"></div>
                </div>
                <p class="ptext">${data.title}</p>
               <div class="line"></div>`

        $('#app').append($dom.append(html));

        return $dom
    });
    MVC.addCtrl('home.carousel', function(M, V) {
        MVC.on('Msg', ({ data }) => {
            M.add('home.carousel', data);
            let $dom = V.render('home.carousel');
            let $prev = $('.prev')
            let $next = $('.next')
            let $dot = $dom.find('.btns span');
            let $imgs = $dom.find('.Carousel li');
            let len = $imgs.length;
            let i = 0;
            console.log($dot);
            console.log($imgs);

            function dotChange() {
                $imgs.eq(i).fadeIn(500);
                $dot.eq(i).addClass('choose').siblings().removeClass('choose');
            }




            $next.click(function() {
                if ($imgs.is(':animated')) return;
                $imgs.eq(i).fadeOut(500);
                i++;
                if (i > len - 1) {
                    i = 0
                };
                console.log(i);
                dotChange();

            })

            $prev.click(function() {
                if ($imgs.is(':animated')) return;
                $imgs.eq(i).fadeOut(500);
                i--;
                if (i < 0) {
                    i = len - 1
                };
                dotChange();
            })

            // 小圆点
            $dot.click(function() {
                // $imgs.eq(i).stop(true).fadeOut(500);
                // 改变信号量
                i = $(this).index();
                console.log(i);
                // $imgs.eq(i).fadeIn(500).siblings().fadeOut(500)
                //     // 下一张图片淡入
                //     // 执行方法
                //     // dotChange();
                // $dot.eq(i).addClass('choose').siblings().removeClass('choose');
            })


        })

    })


});